import { Fragment, useState } from 'react';
import UI1 from '../src/view/creatContext'
// 函数式组件(参数一为props)
function Detail({ context, active }) {
  return (
    <>
      <p>{context}</p>
      <p>{active ? '1' : '2'}</p>
    </>
  )

}
// 这里children和footer都是html组件，直接jsx语法{}
function Article({onActive,title, detailData,children,footer=<p>默认底部</p>}) {
  const text = '12345'
  // 响应式数据
  const [status,setStatus] = useState(true)
  function handle(){
    setStatus(!status)
    onActive(status)
  }
  return (
    <div>
      <h1>{title}</h1>
      <Detail {...detailData}></Detail>
      {children}
      <div style={{fontSize:20}}>{footer}</div>
      <button onClick={handle}>按钮</button>
      <p>{status?text:''}</p>
    </div>
  )
}
const num = 'react'
const fn = () => '箭头函数返回'
function fnn() {
  return '普通函数返回'
}
const list = [
  { id: 1, name: 'Vue' },
  { id: 2, name: 'React' },
  { id: 3, name: 'Angular' },
]
const listDom = list.map(item => (
  // key要加在最外层
  <Fragment key={item.id}>
    <li >{item.name}</li>
    <li>------------</li>
  </Fragment>
))

const imgData = {
  className: 'img1',
  style: {
    width: '200px',
    height: '200px',
  }
}

function App() {
  // 选择渲染
  const flag = true
  let content = ''
  if (flag) {
    content = <span>span</span>
  } else {
    content = <p>ppp</p>
  }

  // useState 返回一个数组，内容和修改函数(不能在顶级区域)
  const [context, setContext] = useState('默认内容')
  console.log(context)
  const [array, setArray] = useState(
    [
      { id: 1, name: 'Vue' },
      { id: 2, name: 'React' },
      { id: 3, name: 'Angular' }
    ])

  const arrayData = array.filter(item => (item.id !== 2)).map(it => (
    <a key={it.id} href='#'>{it.name}</a>
  ))

  const dD = (e) => {
    console.log(e.target)
    // setContext('修改了')
    setArray(
      [...array,
      { id: 4, name: 'JQuery' }
      ]
    )
  }

  const articleData = [
    {
      title: '标题1',
      detailData: {
        context: '内容1',
        active: true
      },
      footer:'底部1'
    },
    {
      title: '标题2',
      detailData: {
        context: '内容2',
        active: true
      }
    },
    {
      title: '标题3',
      detailData: {
        context: '内容3',
        active: false
      },
      footer:'底部3'
    }
  ]
  function statusHandle(status){
    console.log(status)
  }
  const articleUI = articleData.map(article => (
    <Article 
      key={article.title}
      {...article}
      onActive={statusHandle}
      >
        <p>我是children</p>
        <p>我是children</p>
    </Article>
  ))
  return (
    <div className="App">
      <UI1></UI1>
      {/* <Article
        {...articleData}
      ></Article>
      <Article
        {...articleData}
      /> */}
      {articleUI}

      {/* 传递字符串 */}
      {'This is a string'}
      {/* 传递变量 */}
      {num}
      {/* 函数调用 (显示的是函数的返回值)*/}
      {fn()}
      {fnn()}
      {/* 方法调用 */}
      {new Date().getDate()}
      {/* 使用JS对象 */}
      <span style={{ color: 'red', fontSize: '30px' }}>span</span>
      {/* 循坏渲染列表 */}
      <ul>
        {listDom}
      </ul>
      {content}
      {context}
      <button onClick={dD}>按钮</button>

      {arrayData}

      <img src="./logo512.png" alt="123"
        {...imgData}
      />

    </div>
  );
}

export default App;